<template>
  <a-modal 
    :visible="visible"
    class="contracts-info-modal"
    okText="提交" 
    cancelText="关闭"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    width="800px"
    :confirmLoading="confirmLoading"
    @cancel="closeModal()" 
    @ok="handleSubmit">
    <a-form :form="form"  :label-col="{ span: 5 }" :wrapper-col="{ span:12 }">
      <a-form-item label="联系人姓名">
        <a-input
          v-decorator="['contactName',{rules: [
            {required: true, message: '联系人姓名'},
            {pattern:/^[.\u4e00-\u9fa5]+$/, message:'负责人只能为汉字和“·”'}
          ]}]"
          placeholder="请输入联系人姓名"
        />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input
          :maxLength="11"
          v-decorator="['phoneNum',{ rules: [
            {required: true, message: '手机号'},
            {pattern: /^1[3,4,5,6,7,8,9]\d{9}$/, message: '请填写正确的联系电话'}
          ] }]"
          placeholder="请输入手机号"
        />
      </a-form-item>
      <a-form-item label="固定电话">
        <a-input
          :maxLength="13"
          v-decorator="['telphoneNum',{ rules: [
            {pattern: /^\d{3,4}-\d{7,8}$/, message: '请填写正确的固定电话'}
          ] }]"
          placeholder="请输入固定电话"
        />
      </a-form-item>
      <a-form-item label="传真">
        <a-input
          v-decorator="['faxNum']"
          placeholder="请输入传真"
        />
      </a-form-item>
      <a-form-item label="邮箱">
        <a-input
          v-decorator="['emailAddress', {
            rules: [
            {pattern: /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/,  message: '请填写正确的邮箱'}]
          }]"
          placeholder="请输入邮箱"
        />
      </a-form-item>
      <a-form-item label="微信">
        <a-input
          v-decorator="['wechatNum']"
          placeholder="请输入微信"
        />
      </a-form-item>
      <a-form-item label="QQ">
        <a-input
          :maxLength="11"
          v-decorator="['qqNum',{ rules: [
            {pattern: /^\d{5,11}$/, message: '请填写正确的QQ'}
          ] }]"
          placeholder="请输入QQ"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  name: 'contacts-info',
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    },
    distributorInfo: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    title () {
      return this.record.id ? '修改联系人' : '新增联系人'
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinsated111' }),
      confirmLoading: false,
    }
  },
  watch: {
    visible (value) {
      this.confirmLoading = false
      if (value) {
        if(this.record.id){
          this.$nextTick(()=> {
            const formItems = this.form.getFieldsValue();
            Object.keys(formItems).forEach(key => {
              formItems[key] = this.record[key]
            })
            this.form.setFieldsValue(formItems);
          })
        }
      }
    }
  },
  methods: {
    handleSubmit () {
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          const url = this.record.id ? '/distributor/contacts/update' : '/distributor/contacts/add'
          this.$post(url, {...values, id: this.record.id, distributorId: this.distributorInfo.id}).then(res => {
            this.confirmLoading = false
            if (res && res.returnCode === 1000) {
              this.$message.success('保存成功！')
              this.closeModal(true)
            }
          }).catch(err=> {
            this.confirmLoading = false
          })
        } else {
          this.confirmLoading = false
        }
      });
    },
    
    closeModal (values) {
      this.form.resetFields()
      this.$emit('cancel', values)
    },
  }
}
</script>
<style lang="less">
.contracts-info-modal {
  .ant-form-item-control-wrapper {
    width: 50%;
    float: left;
  }
}
</style>